<template>
  <view class="chat">
    <view fixed placeholder title="聊天内容" left-arrow></view>
    <view id="content" ref="rightBody">
      <view v-for="item in list" :key="item.id">
        <view class="chat-model" v-if="item.isSelf">
          <view>
           <u-image :showLoading="true" shape="circle" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" width="3rem" height="3rem" @click="click"></u-image>
          </view>
          <view class="chat-content chat-content-l">
            {{item.content}}
          </view>
        </view>
        <view class="chat-model" style="justify-content: flex-end" v-else>
          <view class="chat-content chat-content-r">
            {{item.content}}
          </view>
          <view>
           <u-image :showLoading="true" shape="circle" src="https://img01.yzcdn.cn/vant/cat.jpeg" width="3rem" height="3rem" @click="click"></u-image>
          </view>
        </view>
      </view>
    </view>
    <view id="bottom">
      <input type="text" v-model="text" />
      <button @click="onSend">发送</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        path: "ws://185.232.92.15:3433/myHandler/", // socket 地址
        socket: "",
        text: '',
        data: {
          code: 9002,
          msg: '',
          recId: '',
        },
        list: [],
        time: '', // 定时器
      }
    },
    created() {
      this.init()
    },
    methods: {
      onSend() {
        if (this.socket.readyState != 1) {
       uni.showToast({
         title: '连接失败请重新进入',
         icon: 'none'
       });
          return;
        }
        if (!this.text) {
        
		  uni.showToast({
		    title: '请输入内容',
		    icon: 'none'
		  });
          return;
        }
        var data = {
          avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          content: this.text,
          isSelf: false
        }
        this.list.push(data);
        this.send()
        this.text = '';
        this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
      },
      init: function() {
        // 0        CONNECTING        连接尚未建立
        // 1        OPEN            WebSocket的链接已经建立
        // 2        CLOSING            连接正在关闭
        // 3        CLOSED            连接已经关闭或不可用
        if (typeof(WebSocket) === "undefined") {
          uni.showToast({
            title: '您的浏览器不支持socket',
            icon: 'none'
          });
        } else {
          let id = Math.random(); // 随机数
          // 实例化socket
          this.socket = new WebSocket(this.path + '?token=' + id);
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          // this.onHeartbeat(); // 心跳防止断开连接
        }
      },
      open: function() {
		  uni.showToast({
		    title: '连接成功',
		    icon: 'none'
		  });
      
		
      },
      error: function() {
		  uni.showToast({
		    title: '连接失败',
		    icon: 'none'
		  });
     
      },
      getMessage: function(res) {
        let t = JSON.parse(res.data);
        var data = {
          avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
          content: t.msg,
          isSelf: true
        }
        if (t.code == 9002) {
          this.list.push(data);
        }
        this.data.recId = t.recId;
        this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
      },
      send: function() {
        if (this.socket) {
          this.data.code = 9002;
          this.data.msg = this.text;
          this.socket.send(JSON.stringify(this.data))
        }
      },
      close: function() {
        console.log("socket已经关闭")
      },
      onHeartbeat() {
        var time = setInterval(() => {
          this.data.code = 9003;
          this.data.msg = '心跳';
          this.socket.send(JSON.stringify(this.data))
        }, 5000);
        this.time = time;
      }

    },
    destroyed() {
      // 销毁监听
      clearInterval(this.time);
      this.socket.onclose = this.close
    }
  }
</script>

<style>
  .chat {
    height: 100vh;
    background-color: #e6e6e7;
  }

  #content {
       overflow: auto;
       height: 100vh;
       padding-bottom: 100px;
       background-color: #ececec;
  }

  #bottom {
   position: fixed;
       bottom: 0px;
       width: 100%;
       display: flex;
       justify-content: space-evenly;
       padding: 10px 0px;
       background-color: #e5e5ea;
  }

  #bottom input {
    background-color: white;
    width: 72%;
    height: 30px;
    padding: 3px 5px;
    vertical-align: sub;
    border-style: none;
    border-radius: 5px;
  }

  #bottom button {
    height: 32px;
	line-height: 32px;
    background-color: rgb(245, 158, 1);
    border-radius: 5px;
    color: #fff;
  }

  .chat-model {
    display: flex;
    flex-direction: row;
    margin: 10px 10px;
    margin-top: 30px;
    align-items: center;
  }

  .chat-content {
    position: relative;
    max-width: 67%;
    word-break: break-all;
    word-wrap: break-word;
    top: 18px;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
  }

  .chat-content-r {
    right: 10px;
  }

  .chat-content-l {
    left: 10px;
  }
</style>
